<template>
  <div>
    <!--面包屑导航区-->
    <div>传过来的值是{{count}}</div>

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>生产线列表</el-breadcrumb-item>
      <el-breadcrumb-item>生产线列表1</el-breadcrumb-item>
    </el-breadcrumb>

    <!--主区域，展示生产线-->
    <el-main class="maincard">
      <div class="showbox">
          <el-card class="showelectricitybox">
            <div class="showcardtemplate">
              <div class="valueshowcardtemplate">
                   179
              </div>
              <div class="statueshowcardtemplate">
                  <i class="el-icon-s-data" style="font-size: 50px; margin-top: 12px; margin-left: 12px" ></i>
              </div>
              <div class="nameshowcardtemplate" style="font-size: 30px;">
                机械臂电压1
              </div>
            </div>
            <div class="showcardtemplate">
              <div class="valueshowcardtemplate">
                   179
              </div>
              <div class="statueshowcardtemplate">
                  <i class="el-icon-s-data" style="font-size: 50px; margin-top: 12px; margin-left: 12px" ></i>
              </div>
              <div class="nameshowcardtemplate" style="font-size: 30px;">
                机械臂电压2
              </div>
            </div>

          </el-card>


          <el-card class="showvoltagebox">
            <div class="showcardtemplate">
              <div class="valueshowcardtemplate">
                   179
              </div>
              <div class="statueshowcardtemplate">
                  <i class="el-icon-s-data" style="font-size: 50px; margin-top: 12px; margin-left: 12px" ></i>
              </div>
              <div class="nameshowcardtemplate" style="font-size: 30px;">
                机械臂电流1
              </div>
            </div>
            <div class="showcardtemplate">
              <div class="valueshowcardtemplate">
                   179
              </div>
              <div class="statueshowcardtemplate">
                  <i class="el-icon-s-data" style="font-size: 50px; margin-top: 12px; margin-left: 12px" ></i>
              </div>
              <div class="nameshowcardtemplate" style="font-size: 30px;">
                机械臂电流2
              </div>
            </div>
          </el-card>



        <el-card class="showaircylinderbox">

        <div class="aircylinderbox" v-for="item in aircylinderList" :key="item.name">
        <div class="aircylindericon">
        <i
          class="el-icon-error"
          style="font-size: 50px; color:rgba(191, 58, 72, 0.96);font-weight: 700; margin-top: 10px; margin-left: 22px"
          v-if="item.value === 1"
        ></i>
        <i
          class="el-icon-success"
          style="
            font-size: 50px;
            font-weight: 700;
            margin-top: 10px;
            color: #2ecc71;
            margin-left: 22px
          "
          v-else
        ></i>
        <div style="margin-top: 20px; color: #2c3e50; margin-left: 20px">
            {{item.name}}
        </div>
        </div>
          </div>

        </el-card>>
      </div>

    </el-main>

    <!--底部区域，展示按钮-->
    <el-footer class="footcard">
      <el-row :span="4">
        <el-button type="primary" @click="addLine">添加生产线</el-button>
        <el-button type="danger" @click="deleteLine">删除生产线</el-button>
      </el-row>
      <!--</el-card>-->
    </el-footer>
  </div>
</template>

<script>
import aircylinderopen from "../../assets/aircylinderopen.png";
import aircylinderclose from "../../assets/aircylinderclose.png";
import router,{Location,Route} from 'vue-router';
export default {
  name: "Robotview",
  data() {
    return {
      normal: aircylinderopen,
      error: aircylinderclose,
      aircylinderList: [
        { value: 1, name: "一号气缸"},
        { value: 1, name: "二号气缸"},
        { value: 0, name: "三号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 0, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 0, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 0, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 0, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 0, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 0, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 0, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 0, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 0, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 0, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 0, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 1, name: "x号气缸"},
        { value: 0, name: "x号气缸"},
      ],
    };
  },
  mounted() {
      console.log(this.count,"test-router",router,'---',this.$route);
      alert(this.$route.query.id)
    },
  props:["count"],
};
</script>

<style lang="less" scoped>
.maincard {
  width: auto;
  height: 700px;
  background-color: #fefff9;
  border-radius: 10px;
  padding: 0;
  border: 1px solid rgba(58, 21, 25, 0.96);
}
.footcard {
  background-color: #b3c0d1;
  color: #333;
  text-align: right;
  line-height: 60px;
}
.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}
.robotcard {
  // transform:scale(0.5,0.5);
  width: 100px;
  height: 100px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  border: 5px solid rgba(58, 21, 25, 0.96);
  border-radius: 10px;
  /*height: 250px;*/
}
.aircylinderclass {
  width: 100px;
  height: 100px;
  padding: 2px;
  margin: 5px;
  float: left;
}

.aircylinderbox {
  float: left;
  height: 120px;
  width: 120px;
  position: relative;
  background-color: #ecf0f1;
  border-radius: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 10px;
  transition: 0.5s;
  z-index: 5;
//   border: 1px solid rgb(106, 101, 101);
}

.aircylindericon{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;

}
.showelectricitybox{
  background-color: rgb(186, 208, 213);
  margin-bottom: 5px;
}
.showvoltagebox{
  background-color: rgb(186, 208, 213);
  margin-bottom: 5px;

}
.showaircylinderbox{
  background-color: rgb(186, 208, 213);
  position: relative;
 margin-bottom: 5px;

}
.showcardtemplate{
  width: 250px;
  height: 150px;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  background-color: #fff;
}
.valueshowcardtemplate{
  width: 150px;
  height: 80px;
  margin: 5px;
  background-color: rgb(205, 216, 218);
  float: left;
  font-size: 60px;
}
.statueshowcardtemplate{
  width: 80px;
  height: 80px;
  margin: 5px;
  background-color: rgb(205, 216, 218);
  float: left;

}
.nameshowcardtemplate{
  width: 240px;
  height: 50px;
  margin: 5px;
  background-color: rgb(205, 216, 218);
  float: left;

}
</style>
